<template>
	<view class="content bg-img  padding-bottom " v-if="show">
		<view class="head flex justify-center padding-top">
			<view class=" head flex justify-center padding-top">
				<image src="../../static/head.png" mode="scaleToFill" class="margin-right-xs"></image>
				<text>生态PECA</text>
			</view>
		</view>
		<view class="flex justify-center margin-lg"><text class="" style="color: #C7C7C7; font-size: 30rpx;">{{ i18n.peca.i1}}</text></view>
		<view class="flex justify-around">
			<view class="f1 flex flex-direction align-center justify-center">
				<text style="color: #04BD9E;">{{ info.score }}A</text>
				<view class="flex align-center margin-top-xs">
					<text class="bgblue" v-if="info.has_airdrop"></text>
					<text class="bgred" v-else></text>
					<text class="margin-left-xs">{{ i18n.peca.i2}}</text>
				</view>
			</view>
			<view class="f1 flex flex-direction align-center justify-center">
				<text style="color: #04BD9E;" v-if="pec>=1">≥1</text>
				<text style="color: #04BD9E;" v-else><1</text>
				<text class="margin-top-xs">My PEC</text>
			</view>
		</view>

		<view class="margin-top-xl">
			<view class="flex flex-direction" style="padding: 0 100rpx;">
				<text class="f30 text-gray animation-slide-bottom" style="animation-delay: 0.1s;">PEC{{ i18n.peca.i3}}：</text>
				<view class="flex align-center animation-slide-bottom" style="animation-delay: 0.4s;">
					<text class="f20 text-white margin-top-xs ">{{ data.openAddress }}</text>
					<text
						style="white-space: nowrap;background: rgba(14, 16, 16, 0.44);padding: 5rpx;  color: #FFFFFF; "
						class="margin-left-xs  r"
						v-clipboard:copy="url"
						@click="dianji(data.openAddress)"
					>
						{{ i18n.pec.i2 }}
					</text>
				</view>
			</view>

			<view class="flex flex-direction margin-top" style="padding: 0 100rpx;">
				<text class="f30 text-gray animation-slide-bottom" style="animation-delay: 0.7s;">PECA{{ i18n.peca.i3}}：</text>
				<view class="flex align-center animation-slide-bottom" style="animation-delay: 1s;">
					<text class="f20 text-white margin-top-xs ">{{ data.pecaAddress }}</text>
					<text
						style="white-space: nowrap;background: rgba(14, 16, 16, 0.44); padding: 5rpx; color: #FFFFFF; "
						class="margin-left-xs  r"
						v-clipboard:copy="url1"
						@click="dianji1(data.pecaAddress)"
					>
						{{ i18n.pec.i2 }}
					</text>
				</view>
			</view>
			<view class="flex flex-direction margin-top" style="padding: 0 100rpx;">
				<text class="f30 text-gray animation-slide-bottom" style="animation-delay: 1.1s;">PEC{{ i18n.peca.i4}}：</text>
				<view class="flex align-center animation-slide-bottom" style="animation-delay: 1.3s;">
					<text class="f20 text-white margin-top-xs ">{{ data.config.pecdel }}</text>
					<text
						style="white-space: nowrap;background: rgba(14, 16, 16, 0.44); padding: 5rpx; color: #FFFFFF; "
						class="margin-left-xs  r"
						v-clipboard:copy="url2"
						@click="dianji2(data.config.pecdel)"
					>
						{{ i18n.pec.i2 }}
					</text>
				</view>
			</view>
		</view>
		<navigator url="index">
			<view class="flex justify-center base" style="margin: 100rpx;">
				<QSAnimation animationType="elasticity_Y" @click="jump">
					<view class="animation cuIconfont-spin"></view>
					<view class="qiyuan1 flex align-center flex-direction justify-center" style="color:#F0F0F0 ;">
						<text class="f60 ">{{ i18n.peca.i5}}</text>
						<text class="f60 margin-top-xs">{{ i18n.index.index5 }}</text>
						<text class="f36 margin-top-xs" style="color: #04BD9E;">PEC:PECA</text>
					</view>
				</QSAnimation>
			</view>
		</navigator>

		<navigator url="../Pec/Pec">
			<view class="flex justify-center base" style="margin: 100rpx;">
				<QSAnimation animationType="elasticity_Y" @click="jump">
					<view class="animation1 ">
						<view class="loader">
							<view class="face"><view class="circle"></view></view>
							<view class="face"><view class="circle"></view></view>
						</view>
					</view>
					<view class="qiyuan1 flex align-center flex-direction justify-center" style="color:#F0F0F0 ;">
						<text class="f60 ">{{ i18n.pec.i4 }}</text>
						<text class="f60 margin-top-xs">{{ i18n.pec.i5 }}</text>
						<text class="f36 margin-top-xs" style="color: #04BD9E;">10U: {{ ttt }}T</text>
					</view>
				</QSAnimation>
			</view>
		</navigator>

		<view class="flex flex-direction align-center padding-xl justify-center">
			<view
				class=""
				v-if="
					Number(data.config.pec_serial) < Number(data.config.pec_serial_total) ||
						(data.config.peca_surplus <= 0 && Number(data.config.pec_serial) + 1 < Number(data.config.pec_serial_total))
				"
			>
				<text
					style="font-size: 38rpx; color: #E6E6E6;"
					v-if="timeformat(data.config.pec_time_start) <= Date.now() && data.config.pec_serial >= 1 && data.config.peca_surplus > 0"
				>
					{{ i18n.peca.i9}}
					<text style="color: #04BD9E;" class="margin-lr-xs">{{ data.exchange.pec_serial }}</text>
					{{ i18n.peca.i10}}：
					<text style="color: #04BD9E;">{{ data.exchange.pec_fictitious_total }}PECA</text>
				</text>
				<view style="font-size: 38rpx; color: #E6E6E6;" class="flex flex-direction justify-center align-center" v-else>
					<view class="margin-bottom-sm">
						{{ i18n.peca.i9}}
						<text style="color: #04BD9E;" class="margin-lr-xs">
							{{ Number(data.exchange.pec_serial) + (data.config.pec_serial > 1 || data.config.peca_surplus <= 0 ? 1 : 0) }}
						</text>
						{{ i18n.peca.i10}}：
						<text style="color: #04BD9E;">
							{{
								data.config.pec_serial > 1 || data.config.peca_surplus <= 0
									? data.config.pec_fictitious_next_total
									: data.config.pec_fictitious_total
							}}PECA
						</text>
					</view>
					<text class="">
						{{ data.config.pec_serial > 1 || data.config.peca_surplus <= 0 ? data.config.pec_time_end : data.config.pec_time_start }}
					</text>
				</view>
			</view>
			<text style="font-size: 38rpx; color: #E6E6E6;" v-else>通兑已完</text>

			<!-- <text style="color: #04BD9E; font-size:28rpx ; margin-top: 36rpx;">通兑成功{{ data.exchange.exchange_num }}</text> -->
			<block v-if="timeformat(data.config.pec_time_start) <= Date.now()">
				<view
					class="w100 f30 margin-top-xl "
					style="width: 100%; height:50rpx; overflow: scroll; color: #999999;"
					v-if="data.airdrop.status && Number(data.config.peca_surplus) > Number(data.config.peca_quantity)"
				>
					<swiper :interval="3000" :duration="1000" autoplay circular vertical style=" height:50rpx;">
						<block v-for="(item, index) in data11" :key="index">
							<swiper-item style=" height:50rpx;">
								<block style="display: flex; flex-direction: column;">
									<view class="flex text-center margin-bottom ">
										<text class="f-1 ">{{ item.address }}</text>
										<text class="f-1 ">
											{{ item.value }}
											<text style="color: rgb(73, 251, 221);" class="margin-left-xs">PECA</text>
										</text>
									</view>
								</block>
							</swiper-item>
						</block>
					</swiper>
				</view>
				<view
					class="flex justify-center margin-top-xl w100 f30 align-center"
					v-else
					style="width: 100%; height:50rpx; overflow: scroll; color: #999999;"
				>
					<text v-if="Number(data.config.peca_surplus) != 0">
						{{ i18n.peca.i10}}
						<text style="color: rgb(73, 251, 221)" class="margin-lr-xs">{{ data.config.peca_surplus }}PECA</text>
					</text>
				</view>
			</block>
			<text style="font-size: 38rpx; color: #CCCCCC;margin-top: 49rpx;">
				{{ i18n.peca.i9}}
				<text style="color: #04BD9E;" class="margin-lr-xs">{{ data.airdrop.airdrop_serial }}</text>
				{{ i18n.peca.i16}}：
				<text style="color: #04BD9E;" class="">{{ data.airdrop.airdrop_fictitious_total }}PECA</text>
			</text>
		</view>
		<view class="flex justify-center">
			<view class="bggg">
				<text>
					Preacher derivatives ecosystemPEC-PECAPEC coin airdrop attack, PECA limited issue of 7200, increase the EFI ecologyPEC community
					autonomous organization, in order to thank the builders of ecological consensus, provide PEC exchange PECA and consensus airdrop
					PECA for outstanding community contributorsThe proportion of exchange is 70%, and the proportion of airdrop is 30%70% of PECA
					total amount, 7 periods of PECA: PEC to PECA, PEC to destroy directlyPhase I [month]: 20% in PEC, 5pec: 1pecaPhase II [month]:
					5%Phase 3 [month]: 5%Phase 4 [month]: 5%Issue 5 [month]: 10%Issue 6 [month]: 15%The second to sixth period of value exchange,
					0.8upec: 1upecaThe seventh unlimited [month]: 40% with PEC value, 0.9upec: 1upecaPECA exchange conditions: excellent preachers in
					PEC community, angel, V4, V3, V2, v1. The number of PECA exchange in the first phase is ≤ 6, 8, 6, 4, 2 respectively, and
					decreases from the second to the sixth phasePhase I to phase VI PECA not fully cashed in the current period will be destroyed
					directlyAirdrop 30% is divided into 10 phases, once a month, [phases 1-10 are 5%, 5%, 5%, 10%, 10%, 15%, 15%, 15%, 15%]Free link
					effective address send 100A energyPush the effective address on the chain to send 100A energyFree 300A energy for addresses above
					1pecMonthly weighted allocation PECAFormula: monthly total airdrops × Single effective address energy / whole network effective
					address energy = single airdrop quantityTo build a consensus for PEC, ecological contributors should be the masters, wealth
					freedom, create greater wealth value, and preach PEC defi king Preacher衍生品生态 PEC-PECA
					PEC子币空投来袭，PECA限量发行7200枚，增加DeFi生态
					PEC社区自治组织，为感谢生态共识建设者，为优秀社区贡献者提供PEC通兑PECA及共识者空投PECA 通兑比例70％，空投比例30％
					PEC通兑PECA总量70％共7期通兑：【PEC通兑PECA，PEC直接销毁】 第一期【月】：20％以PEC数量通兑，5PEC：1PECA 第二期【月】：5％
					第三期【月】：5％ 第四期【月】：5％ 第五期【月】：10％ 第六期【月】：15％ 二至六期价值通兑，0.8uPEC：1uPECA
					第七期无限【月】：40％以PEC价值通兑，0.9uPEC：1uPECA
					PECA通兑条件PEC社区优秀布道者，天使、V4、V3、V2、V1，一期PECA通兑数量分别为≤6、8、6、4、2枚，二至六期同步递减
					一至六期当期未通兑完的PECA直接销毁
					空投30％分10期，每月一次，【1-10期分别为5％、5％、5％、5％、10％、10％、15％、15％、15％、15％】 免费上链有效地址送100A能量
					直推上链有效地址送100A能量 持币1PEC以上地址赠另送300A能量 月加权分配PECA
					公式：月空投总量×单个有效地址能量/全网有效地址能量=单个空投数量
					为PEC共识搭建生态贡献者当家作主，财富自由，创造更大财富价值，布道PEC-DeFi王者
				</text>
				<text>
					PECA airdrop rules: one IP and one effective airdrop address, create unconditional airdrop on the chain for the first time, send
					100A energy on the chain, promote another 100A energy, send 300A energy for wallet address holding ≥ 1pec, and enjoy airdrop for
					monthly wallet address holding ≥ 1pec PECA空投规则：
					一ip一有效空投地址，首次创建上链无条件空投，上链即送100A能量，推广另送100A能量，钱包地址持有≥1PEC另送300A能量，每月钱包地址必须持有≥1PEC享受空投
				</text>
				<text>
					Aggregator ecologyPEC smart contract protects PECA transactionsPick up the currency fuel, automatically execute PEC exchange TRX
					exchange PECA, ensure the value of PECA, and build a perfect defi ecology 聚合器生态 PEC智能合约保护PECA交易兑
					提币燃料自动执行PEC兑换TRX兑换PECA，保证PECA价值，搭建完美DeFi生态
				</text>
			</view>
		</view>

		<w-loading :text="i18n.pec.i18" mask="true" click="true" ref="loading"></w-loading>
	</view>
</template>

<script>
import QSAnimation from '@/components/QS-Animation/QS-Animation.vue';

export default {
	components: {
		QSAnimation,
	},
	data() {
		return {
			show: true,
			data: {},
			newDate: '',
			dlyBurstData: '',
			m: '',
			uid: uni.getStorageSync('uid'),
			redata: {},
			url: '',
			url1: '',
			url2: '',
			info: uni.getStorageSync('data'),
			pec: '',
			ttt: '',
			data11: [],
		};
	},
	computed: {
		i18n() {
			return this.$t('message');
		},
	},
	onLoad() {
		var obj = setInterval(() => {
			if (window.tronWeb) {
				clearInterval(obj);

				this.myPec();
				this.name1();
			} else {
				// this.show = false;
			}
		}, 20);
	},
	
	
	onShow() {},

	methods: {
		timeformat(date) {
			date.replace('-', '/');
			return +new Date(date);
		},
		dianji(e) {
			console.log('e :>> ', e);

			uni.$showMsg(this.i18n.tongdui.i10);
			this.url = e;
		},
		dianji1(e) {
			console.log('e :>> ', e);

			uni.$showMsg(this.i18n.tongdui.i10);
			this.url1 = e;
		},
		dianji2(e) {
			console.log('e :>> ', e);

			uni.$showMsg(this.i18n.tongdui.i10);
			this.url2 = e;
		},
		async name1() {
			const res = await this.$u.post('/api/pec/bilie', {}, { token: uni.getStorageSync('token') });
			this.ttt = res;
			const ress = await this.$u.post('api/pe/pecaList', {}, { token: uni.getStorageSync('token') });
			this.data11 = ress.data;
			console.log('ress :>> ', ress);
		},
		async myPec() {
			console.log('this.info :>> ', this.info);
			const res = await this.$u.post(
				'/index.php/api/pe/index',
				{},
				{
					token: uni.getStorageSync('token'),
				},
			);
			this.data = res.data;
			const trc20ContractAddress = res.data.openAddress; //contract address
			var address = uni.getStorageSync('uid');
			console.log('address :>> ', address);
			try {
				let contract = await tronWeb.contract().at(trc20ContractAddress);
				let result = await contract.balanceOf(address).call();
				console.error('result', result);
				this.pec = parseInt(result._hex, 16) / 100000000;
				console.error('this.pee', this.pec);
			} catch (error) {
				console.error('trigger smart contract error', error);
			}
		},
	},
	filters: {
		dateFormat(originVal) {
			const dt = new Date(originVal);
			const y = dt.getFullYear();
			const m = (dt.getMonth() + 1 + '').padStart(2, '0');
			// this.m = m;
			const d = (dt.getDate() + '').padStart(2, '0');
			const hh = (dt.getHours() + '').padStart(2, '0');
			const mm = (dt.getMinutes() + '').padStart(2, '0');
			const ss = (dt.getSeconds() + '').padStart(2, '0');
			// ${hh}:${mm}:${ss}
			return `${y}-${m}-${d} `;
		},
	},
};
</script>

<style lang="scss" scoped>
.inner-container {
	animation: myMove 5s linear infinite;
	animation-fill-mode: forwards;
}
/*文字无缝滚动*/
@keyframes myMove {
	0% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(-150px);
	}
}
.bgblue {
	width: 20rpx;
	height: 20rpx;
	background: #04bd9e;
	border: 3rpx solid #04bd9e;
	border-radius: 50%;
	vertical-align: middle;
}
.bgred {
	width: 20rpx;
	height: 20rpx;
	background: red;
	border: 3rpx solid red;
	border-radius: 50%;
	vertical-align: middle;
}
.f1 {
	width: 300rpx;
	height: 118rpx;
	background: #161919;
	opacity: 0.7;
	color: #e6e6e6;
	border-radius: 20rpx;
}
.bggg {
	width: 702rpx;
	height: 252rpx;
	padding: 20rpx;
	overflow: scroll;
	background: #161919;
	color: #999999;
	// opacity: 0.9;
	border-radius: 20rpx;
	line-height: 2;
}
.valueStyle {
	font-weight: 600;
	//font-size:25px;
	// margin-bottom:0px;
	// cursor:pointer;
	background-image: -webkit-linear-gradient(bottom, red, #ff5f60, #f0c41b);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.loader {
	width: 20em;
	height: 20em;
	font-size: 10px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loader .face {
	position: absolute;
	border-radius: 50%;
	border-style: solid;
	animation: animate 3s linear infinite;
}

.loader .face:nth-child(1) {
	width: 100%;
	height: 100%;
	color: gold;
	border-color: currentColor transparent transparent currentColor;
	border-width: 0.2em 0.2em 0em 0em;
	--deg: -45deg;
	animation-direction: normal;
}

.loader .face:nth-child(2) {
	width: 80%;
	height: 80%;
	color: lime;
	border-color: currentColor currentColor transparent transparent;
	border-width: 0.2em 0em 0em 0.2em;
	--deg: -135deg;
	animation-direction: reverse;
}

.loader .face .circle {
	position: absolute;
	width: 50%;
	height: 0.1em;
	top: 50%;
	left: 50%;
	background-color: transparent;
	transform: rotate(var(--deg));
	transform-origin: left;
}

.loader .face .circle::before {
	position: absolute;
	top: -0.5em;
	right: -0.5em;
	content: '';
	width: 1em;
	height: 1em;
	background-color: currentColor;
	border-radius: 50%;
	box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em, 0 0 0 0.5em rgba(255, 255, 0, 0.1);
}

@keyframes animate {
	to {
		transform: rotate(1turn);
	}
}

.content {
	width: 100vw;
	background-image: url(../../static/bgImg.png);
	.rankingComputingPower {
		width: 702rpx;
		// height: 778rpx;
		background: rgba(14, 16, 16, 0.44);
		//opacity: 0.44;
		border-radius: 20rpx;
		padding: 30rpx;
		margin: 0 auto;
		margin-top: 8rpx;
	}
	.pec {
		width: 702rpx;
		height: 220rpx;
		background: rgba(11, 13, 13, 0.7);
		// opacity: 0.7;
		border-radius: 20rpx;
		margin: 0 auto;

		font-size: 50rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #04bd9e;
		margin-top: 50rpx;
	}
	.computingPower {
		width: 702rpx;
		height: 300rpx;
		//background: #0E1010;
		//opacity: 0.44;
		background: rgba(14, 16, 16, 0.44);
		border-radius: 20rpx;

		margin: 0 auto;
		margin-top: 78rpx;
		padding: 30rpx;
		text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
		.bd {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 77rpx;
			border-top: 2px dashed #ffffff;
		}
	}
	//height: 1639rpx;
	.sunburstBlock {
		width: 702rpx;
		height: 170rpx;
		background: rgba(22, 25, 25, 0.7);
		// opacity: 0.7;
		border-radius: 20rpx;
		margin: 0 auto;
	}
	.basicComputingPower {
		width: 702rpx;
		height: 482rpx;
		background: rgba(14, 16, 16, 0.7);
		// opacity: 0.7;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 76rpx;
		box-sizing: border-box;
		padding: 72rpx 31rpx 58rpx 31rpx;
	}
	.base {
		position: relative;
		.animation {
			position: absolute;
			//top: 100rpx;

			width: 390rpx;
			height: 390rpx;
			border-radius: 50%;
			border-top: 16rpx solid rgba(0, 222, 185, 0.4);
			border-bottom: 16rpx solid rgba(0, 222, 185, 0.4);
		}
		.animation1 {
			position: absolute;
			//top: 100rpx;

			width: 390rpx;
			height: 390rpx;
			border-radius: 50%;
			//border-top: 16rpx solid rgba(0, 222, 185, 0.4);
			// border-bottom: 16rpx solid rgba(0, 222, 185, 0.4);
		}
	}

	.time {
		.tt1 {
			display: flex;
			flex-direction: column;
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #e6e6e6;
		}
		.tt2 {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #cccccc;
			margin-top: 70rpx;
			.color {
				font-size: 32rpx;
				color: #04bd9e;
			}
		}
		.tt3 {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #cccccc;
			margin-top: 34rpx;
		}
	}
	.qiyuan1 {
		width: 390rpx;
		height: 390rpx;
		//border: 6rpx solid rgba(0, 222, 185, 0.4);
		border-radius: 50%;
		/deep/.t1,
		.t2 {
			font-size: 60rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff !important;
		}
		.t3 {
			width: 268rpx;
			height: 2rpx;
			background: #cccccc;
		}
		.t4 {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #04bd9e;
		}
	}
	.website {
		//width: 190rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 77rpx;
		white-space: nowrap;
		border-bottom: 2rpx dashed #ffffff;
	}
	.head {
		image {
			width: 102rpx;
			height: 90rpx;
		}
		text {
			font-size: 60rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fefefe;
		}
	}
	.box {
		// width: 228rpx;
		// height: 118rpx;
		// background: #161919;
		// opacity: 0.7;
		border-radius: 20rpx;
	}
}
</style>
